<template>
  <div class="base-container">
    <div class="btn-group-inline">
      <t-button variant="outline" theme="primary" @click="addTable">
        <t-icon name="add" slot="icon" />
        新增表单
      </t-button>
    </div>
    <t-table rowKey="id" :data="tables" :columns="columns" :pagination="pagination" bordered>
      <template #op="{ row }">
        <t-button @click="handleShow(row)" size="small" variant="text" class="t-button-link" theme="success">
          <t-icon name="browse" slot="icon" />
          查看
        </t-button>
        <t-button @click="handleEdit(row)" size="small" variant="text" class="t-button-link">
          <t-icon name="edit-1" slot="icon" />
          修改
        </t-button>
        <t-button @click="handleDelete(row)" size="small" variant="text" class="t-button-link" theme="danger">
          <t-icon name="delete" slot="icon" />
          删除
        </t-button>
      </template>
    </t-table>
    <edit-table-info
      v-if="dialog.open_table_detail"
      :visible.sync="dialog.open_table_detail"
      :tableId="selectedTableId"
      :edit="dialog.isEditForm"
      @reload="getTables"
    />
    <t-dialog :closeOnOverlayClick="false" theme="warning" header="提示" :visible.sync="dialog.open_delete_table" @confirm="deleteTable">
      <div>确实删除【{{ dialog.delete_table_name }}】表单吗？</div>
    </t-dialog>
  </div>
</template>

<script>
import EditTableInfo from './components/edit-table-info.vue';

export default {
  name: 'tables',
  components: { EditTableInfo },
  data() {
    return {
      tables: [],
      columns: [
        { align: 'center', colKey: 'name', title: '表单名称', ellipsis: true },
        { align: 'center', colKey: 'code', title: '表单编号' },
        { align: 'center', colKey: 'sort', title: '序号', width: 80 },
        { align: 'center', colKey: 'statisticalRange', title: '统计范围', ellipsis: true },
        { align: 'center', colKey: 'submittedUnit', title: '报送单位', ellipsis: true },
        { align: 'center', colKey: 'submittedDate', title: '报送方式及日期', ellipsis: true },
        { align: 'center', colKey: 'op', title: '操作', width: 230 },
      ],
      pagination: {
        total: 0,
        showPageSize: false,
        showFirstAndLastPageBtn: false,
      },
      dialog: {
        open_table_detail: false,
        open_delete_table: false,
        delete_table_name: '',
        isEditForm: false
      },
      selectedTableId: -1,
    };
  },
  created() {
    this.getTables();
  },
  methods: {
    getTables() {
      this.$api.kjtjdc.table.getTableList().then(({ rows }) => {
        this.tables = rows;
        this.pagination.total = rows.length;
      });
    },
    addTable() {
      this.dialog.isEditForm = true;
      this.selectedTableId = -1;
      this.dialog.open_table_detail = true;
    },
    handleEdit(row) {
      this.dialog.isEditForm = true;
      this.selectedTableId = row.id;
      this.dialog.open_table_detail = true;
    },
    handleDelete(row) {
      this.selectedTableId = row.id;
      this.dialog.delete_table_name = row.name;
      this.dialog.open_delete_table = true;
    },
    async deleteTable() {
      const { code } = await this.$api.kjtjdc.table.deleteTableInfo(this.selectedTableId);
      if (code === 200) {
        this.getTableDetail()
        this.$message.success('表单删除成功');
      }
      this.dialog.open_delete_table = false;
    },
    handleShow(row) {
      this.dialog.isEditForm = false;
      this.selectedTableId = row.id;
      this.dialog.open_table_detail = true;
    }
  },
};
</script>

<style lang="less" scoped></style>
